//@ts-nocheck
import {useCallback, useRef, useState} from 'react';
import {Alert, Button, ScrollView, Text, TextInput, View} from 'react-native';
import ActionSheet from 'react-native-actionsheet';
import {setStorageItem, getStorageItem} from 'utils/storage';
import {Button as PaperButton, Portal, Dialog} from 'react-native-paper';
import {useFocusEffect} from '@react-navigation/native';
export default props => {
  const onPress = () => {
    props.navigate.navigation.navigate('createIndex');
  };
  const ActionSheetRef = useRef();
  const [List, setList] = useState([]);
  useFocusEffect(
    useCallback(() => {
      getStorageItem('dragData').then(value => {
        value && setList(JSON.parse(value));
      });
    }, []),
  );
  const indexRef = useRef<number>();
  const [value, setValue] = useState('');
  const [visible, setVisible] = useState(false);
  const handleDelete = () => {
    const currentList = List.filter((_, index) => {
      return index !== indexRef.current;
    });
    setList(currentList);
    setStorageItem('dragData', JSON.stringify(currentList));
  };
  const onSubmit = () => {
    const currentList = List.map((item, index) => {
      if (index === indexRef.current) {
        return {
          ...item,
          name: value,
        };
      } else {
        return item;
      }
    });
    setList(currentList);
    setVisible(false);
    setValue('');
    setStorageItem('dragData', JSON.stringify(currentList));
  };
  const onCancel = () => {
    setVisible(false);
    setValue('');
  };
  return (
    <View style={{flex: 1, backgroundColor: 'white'}}>
      {props.showHeader && (
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
            paddingVertical: 14,
            borderBottomColor: 'rgba(51, 51, 51, 0.05)',
            borderBottomWidth: 1,
            position: 'relative',
          }}>
          <Text>我的模板</Text>
          <View
            style={{
              position: 'absolute',
              right: 28,
              top: 6,
            }}>
            <Button title="新建" color="#007AFF" onPress={onPress}></Button>
          </View>
        </View>
      )}
      <ScrollView
        style={{
          paddingHorizontal: 12,
        }}>
        {List.map((item, index) => {
          return (
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'space-between',
                borderBottomColor: 'rgba(51, 51, 51, 0.05)',
                borderBottomWidth: 1,
                paddingVertical: 12,
              }}
              key={item.id}>
              <Text>{item.name}</Text>
              <View
                style={{
                  flexDirection: 'row',
                  alignItemsc: 'center',
                }}>
                <PaperButton
                  onPress={() => {
                    props.navigate.navigation.navigate('createIndex', {
                      index,
                    });
                  }}
                  mode="contained"
                  textColor="rgba(0, 122, 255, 1)"
                  buttonColor="rgba(0, 122, 255, 0.08)">
                  编辑
                </PaperButton>
                <PaperButton
                  mode="text"
                  onPress={() => {
                    ActionSheetRef.current.show();
                    indexRef.current = index;
                  }}
                  contentStyle={{
                    width: 50,
                    justifyContent: 'center',
                  }}
                  style={{marginLeft: 16, minWidth: 36}}
                  icon={require('assets/images/dots.png')}
                  textColor="rgba(61, 61, 61, 1)"></PaperButton>
              </View>
            </View>
          );
        })}
      </ScrollView>
      <ActionSheet
        ref={ActionSheetRef}
        options={['重命名', '删除', '取消']}
        cancelButtonIndex={2}
        destructiveButtonIndex={1}
        onPress={index => {
          /* do something */
          if (index === 0) {
            setVisible(true);
          } else if (index === 1) {
            Alert.alert('确定要删除此模版？', '', [
              {
                text: '取消',
                style: 'default',
              },
              {
                text: '确定',
                onPress: handleDelete,
                style: 'Destructive',
              },
            ]);
          }
        }}
      />
      <Portal>
        <Dialog
          visible={visible}
          onDismiss={() => {
            setVisible(false);
          }}
          style={{
            backgroundColor: 'white',
          }}>
          <Dialog.Title style={{textAlign: 'center'}}>重命名</Dialog.Title>
          <Dialog.Content>
            <TextInput
              value={value}
              onChangeText={text => {
                setValue(text);
              }}
              placeholder="请输入模板名称"></TextInput>
          </Dialog.Content>
          <Dialog.Actions
            style={{
              justifyContent: 'center',
            }}>
            <PaperButton textColor="rgba(102, 102, 102, 1)" onPress={onCancel}>
              取消
            </PaperButton>
            <PaperButton textColor="rgba(0, 122, 255, 1)" onPress={onSubmit}>
              确定
            </PaperButton>
          </Dialog.Actions>
        </Dialog>
      </Portal>
    </View>
  );
};
